import styles from './NumberPad.less';
import { DeleteOutlined } from '@ant-design/icons';

type Props = {
    index: number, 
    callback: (index: number, num: number) => void;
};

export default ({ index, callback }: Props) => {
    const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    return (
        <div className={styles.numPad}>
            <div className={styles.top}>
                <span>填入</span>
                <div onClick={() => callback?.(index, 0)}><DeleteOutlined style={{ color: '#d46060' }} /></div>
            </div>
            {nums.map(i => (
                <span className={styles.item} key={`${i}`} onClick={() => callback?.(index, i)}>{i}</span>
            ))}
        </div>
    );
}